<template>
  <view class="business-box">
    <view class="height"></view>
    <scroll-view
      :scroll-y="true"
      class="business-sticky"
      :refresher-enabled="true"
      :refresher-triggered="pulling"
      lower-threshold="60"
      @refresherrefresh="pull"
      @scrolltolower="loadMore"
    >
      <Empty title="暂时没有内容" v-if="!loading && list.length === 0" />
      <block v-else>
        <block v-if="type === 'find'">
          <FindItem v-for="item in list" :car="item" :key="item.content_id" />
        </block>
        <block v-else-if="type === 'resource'">
          <view v-for="item in list" :key="item.content_id">
            <ResourceItem :car="item" :key="item.content_id" />
          </view>
        </block>
        <view class="loading-more" v-if="finished">
          已全部加载完毕
        </view>
        <view class="loading-more" v-if="loading && !pulling">
          正在加载...
        </view>
      </block>
    </scroll-view>
  </view>
</template>

<script>
import FindItem from '../find/index/item'
import ResourceItem from '../resource/index/item'
import { navigateTo } from '@utils/index'
import Empty from '@components/common/empty'
import { getFindList, getResourceList } from '@requests/business'

export default {
  name: 'CircleList',
  components: {
    FindItem,
    ResourceItem,
    Empty
  },
  props: {
    type: {
      type: String,
      default: 'resource'
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pulling: false,
      page: 1,
      searchData: {
        car_brand_id: '',
        province_code: '',
        city_code: ''
      }
    }
  },
  created() {
    this.getList({ page: 1 })
  },
  methods: {
    pull() {
      if (this.pulling) {
        return
      }
      this.pulling = true
      setTimeout(() => {
        this.finished = false
        this.getList({ ...this.searchData, page: 1 })
      }, 1000)
    },
    getList(data) {
      const type = this.type
      if (this.loading || this.finished) {
        return
      }
      this.loading = true
      this.getListMethod()(data).then(res => {
        this.loading = false
        this.pulling = false
        this.page = data.page
        const list = res.result.list
        if (list.length === 0) {
          this.finished = true
          if (data.page === 1) {
            this.list = []
          }
          return
        }
        this.list = data.page > 1 ? [...this.list, ...list] : list
      })
    },
    getListMethod() {
      return this.type === 'resource' ? getResourceList : getFindList
    },
    loadMore() {
      this.getList({ ...this.searchData, page: this.page + 1 })
    },
    search(searchData) {
      this.finished = false
      this.searchData = { ...this.searchData, ...searchData }
      this.getList({ ...this.searchData, page: 1 })
    }
  }
}
</script>

<style>
.height {
  height: 24rpx;
  background: #f9f9f9;
}
.business-box {
  height: calc(100vh - 330rpx);
  overflow: hidden;
}
.business-sticky {
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  overflow: auto;
}
.loading-more {
  text-align: center;
  font-size: 24rpx;
  padding: 0 0 24rpx;
}
</style>
